跳到主要内容

Service Worker缓存与离线功能详解

什么是Service Worker​

Service Worker是一个在浏览器后台运行的脚本，它充当Web应用程序、浏览器与网络（可用时）之间的代理服务器。它能够拦截网络请求、缓存资源，实现离线功能，是现代Web应用性能优化和离线体验的核心技术。

主要特性​

  • 离线缓存：缓存资源，支持离线访问
  • 推送通知：接收服务器推送的消息
  • 后台同步：在后台同步数据
  • 网络代理：拦截和修改网络请求
  • 独立线程：在主线程外运行，不阻塞UI

应用场景​

  • 离线Web应用
  • 推送通知服务
  • 后台数据同步
  • 资源缓存优化
  • 网络请求拦截
  • 性能提升

Service Worker的基本概念​

在深入了解Service Worker缓存之前，先了解几个基本概念：

  • Service Worker：一个注册在指定源和路径下的事件驱动型Worker
  • 生命周期：注册、安装、激活、空闲、终止
  • 事件驱动：主要处理fetch、install、activate等事件
  • 异步API：完全异步，不阻塞主线程
  • 安全限制：只能在HTTPS环境下运行（localhost除外）
  • 作用域：限定Service Worker可以控制的页面范围

工作原理​

基本架构​

Web应用 ←→ Service Worker ←→ 网络
           ↓
        缓存存储

工作流程​

  1. 注册：Web应用注册Service Worker
  2. 安装：Service Worker安装并缓存资源
  3. 激活：Service Worker接管页面
  4. 拦截：拦截网络请求
  5. 响应：返回缓存资源或网络资源

线程模型​

  • 主线程：处理UI和用户交互
  • Service Worker线程：处理缓存和网络请求
  • 独立运行：不阻塞主线程

Service Worker的生命周期​

注册阶段​

// 检查浏览器支持
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    // 注册Service Worker
    navigator.serviceWorker.register('/sw.js')
      .then(registration => {
        console.log('Service Worker注册成功:', registration);
      })
      .catch(error => {
        console.error('Service Worker注册失败:', error);
      });
  });
}

安装阶段​

// sw.js
const CACHE_NAME = 'my-app-cache-v1';
const urlsToCache = [
  '/',
  '/css/style.css',
  '/js/app.js',
  '/images/logo.png'
];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => {
        console.log('缓存已打开');
        return cache.addAll(urlsToCache);
      })
      .then(() => {
        console.log('所有资源已缓存');
        // 跳过等待，立即激活
        return self.skipWaiting();
      })
  );
});

激活阶段​

self.addEventListener('activate', event => {
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.map(cacheName => {
          if (cacheName !== CACHE_NAME) {
            console.log('删除旧缓存:', cacheName);
            return caches.delete(cacheName);
          }
        })
      );
    }).then(() => {
      // 立即接管所有页面
      return self.clients.claim();
    })
  );
});

请求拦截阶段​

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => {
        // 返回缓存响应
        if (response) {
          return response;
        }
        
        // 缓存未命中，从网络获取
        return fetch(event.request);
      })
  );
});

Service Worker缓存的特点​

相比于传统的HTTP缓存，Service Worker缓存具有以下优势：

  • 可编程性：通过JavaScript代码精确控制缓存策略
  • 持久化存储：缓存数据可以长期保存
  • 离线访问：即使在网络不可用的情况下也能提供内容
  • 自定义响应：可以返回缓存内容、修改响应或合成新响应
  • 缓存优先策略：可以实现缓存优先、网络优先等各种策略
  • 细粒度控制：可以针对不同资源设置不同的缓存策略

Service Worker缓存策略​

缓存优先策略​

先检查缓存，如果缓存命中则返回缓存内容，否则发起网络请求并缓存结果：

// 优先使用缓存，缓存未命中时从网络获取
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => {
        if (response) {
          return response;
        }
        
        return fetch(event.request).then(response => {
          // 检查响应是否有效
          if (!response || response.status !== 200 || response.type !== 'basic') {
            return response;
          }
          
          // 克隆响应
          const responseToCache = response.clone();
          
          caches.open(CACHE_NAME)
            .then(cache => {
              cache.put(event.request, responseToCache);
            });
          
          return response;
        });
      })
  );
});

网络优先策略​

先尝试网络请求，如果网络请求成功则返回结果并更新缓存，如果网络请求失败则返回缓存内容：

// 优先从网络获取，网络失败时使用缓存
self.addEventListener('fetch', event => {
  event.respondWith(
    fetch(event.request)
      .then(response => {
        // 网络成功，更新缓存
        const responseToCache = response.clone();
        caches.open(CACHE_NAME)
          .then(cache => {
            cache.put(event.request, responseToCache);
          });
        
        return response;
      })
      .catch(() => {
        // 网络失败，使用缓存
        return caches.match(event.request);
      })
  );
});

Stale-While-Revalidate策略​

返回缓存内容以保证快速响应，同时在后台发起网络请求更新缓存：

// 立即返回缓存，同时在后台更新缓存
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.open(CACHE_NAME).then(cache => {
      return cache.match(event.request).then(response => {
        const fetchPromise = fetch(event.request).then(networkResponse => {
          cache.put(event.request, networkResponse.clone());
          return networkResponse;
        });
        // 如果有缓存则返回缓存，同时后台更新；否则返回网络请求结果
        return response || fetchPromise;
      });
    })
  );
});

运行时缓存策略​

根据请求类型动态选择缓存策略：

// 动态决定缓存策略
self.addEventListener('fetch', event => {
  const { request } = event;
  const url = new URL(request.url);
  
  // 根据请求类型选择策略
  if (request.method === 'GET') {
    if (url.pathname.startsWith('/api/')) {
      // API请求使用网络优先
      event.respondWith(networkFirst(request));
    } else if (url.pathname.startsWith('/static/')) {
      // 静态资源使用缓存优先
      event.respondWith(cacheFirst(request));
    } else {
      // 其他请求使用缓存优先，网络更新
      event.respondWith(cacheFirstNetworkUpdate(request));
    }
  } else {
    // 非GET请求直接转发
    event.respondWith(fetch(request));
  }
});

// 网络优先策略
function networkFirst(request) {
  return fetch(request)
    .then(response => {
      const responseToCache = response.clone();
      caches.open(CACHE_NAME)
        .then(cache => {
          cache.put(request, responseToCache);
        });
      return response;
    })
    .catch(() => {
      return caches.match(request);
    });
}

// 缓存优先策略
function cacheFirst(request) {
  return caches.match(request)
    .then(response => {
      if (response) {
        return response;
      }
      return fetch(request);
    });
}

// 缓存优先，网络更新策略
function cacheFirstNetworkUpdate(request) {
  return caches.match(request)
    .then(response => {
      const fetchPromise = fetch(request)
        .then(networkResponse => {
          const responseToCache = networkResponse.clone();
          caches.open(CACHE_NAME)
            .then(cache => {
              cache.put(request, responseToCache);
            });
        })
        .catch(() => {});
      
      event.waitUntil(fetchPromise);
      return response;
    });
}

Service Worker缓存API​

Service Worker缓存主要使用Cache API和CacheStorage API：

Cache API​

Cache API用于存储Request/Response对象对：

  • cache.match(request, options)：查找匹配的缓存响应
  • cache.matchAll(request, options)：查找所有匹配的缓存响应
  • cache.put(request, response)：将请求和响应添加到缓存
  • cache.delete(request, options)：从缓存中删除匹配的条目
  • cache.keys(request, options)：获取缓存中的所有键

CacheStorage API​

CacheStorage API用于管理多个Cache对象：

  • caches.open(cacheName)：打开或创建指定名称的缓存
  • caches.has(cacheName)：检查是否存在指定名称的缓存
  • caches.delete(cacheName)：删除指定名称的缓存
  • caches.keys()：获取所有缓存的名称
  • caches.match(request, options)：在所有缓存中查找匹配的响应

离线功能实现​

离线页面​

当用户处于离线状态时，提供友好的离线页面体验：

// 缓存离线页面
const OFFLINE_URL = '/offline.html';

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => {
        return cache.addAll([
          OFFLINE_URL,
          '/css/offline.css',
          '/js/offline.js'
        ]);
      })
  );
});

// 网络失败时返回离线页面
self.addEventListener('fetch', event => {
  if (event.request.mode === 'navigate') {
    event.respondWith(
      fetch(event.request)
        .catch(() => {
          return caches.match(OFFLINE_URL);
        })
    );
  }
});

离线数据存储​

使用IndexedDB存储离线数据，确保用户数据不会丢失：

// 使用IndexedDB存储离线数据
class OfflineDataManager {
  constructor() {
    this.dbName = 'OfflineDataDB';
    this.version = 1;
    this.db = null;
  }
  
  // 打开数据库
  async openDB() {
    return new Promise((resolve, reject) => {
      const request = indexedDB.open(this.dbName, this.version);
      
      request.onerror = () => reject(request.error);
      request.onsuccess = () => {
        this.db = request.result;
        resolve(this.db);
      };
      
      request.onupgradeneeded = (event) => {
        const db = event.target.result;
        
        // 创建对象存储
        if (!db.objectStoreNames.contains('offlineData')) {
          const store = db.createObjectStore('offlineData', { keyPath: 'id' });
          store.createIndex('type', 'type', { unique: false });
          store.createIndex('timestamp', 'timestamp', { unique: false });
        }
      };
    });
  }
  
  // 存储离线数据
  async storeData(data) {
    await this.openDB();
    
    return new Promise((resolve, reject) => {
      const transaction = this.db.transaction(['offlineData'], 'readwrite');
      const store = transaction.objectStore('offlineData');
      
      const request = store.add({
        id: Date.now().toString(),
        data: data,
        type: data.type || 'unknown',
        timestamp: Date.now()
      });
      
      request.onsuccess = () => resolve(request.result);
      request.onerror = () => reject(request.error);
    });
  }
  
  // 获取离线数据
  async getData(type) {
    await this.openDB();
    
    return new Promise((resolve, reject) => {
      const transaction = this.db.transaction(['offlineData'], 'readonly');
      const store = transaction.objectStore('offlineData');
      const index = store.index('type');
      
      const request = index.getAll(type);
      
      request.onsuccess = () => resolve(request.result);
      request.onerror = () => reject(request.error);
    });
  }
  
  // 清除过期数据
  async clearExpiredData(maxAge = 24 * 60 * 60 * 1000) { // 默认24小时
    await this.openDB();
    
    return new Promise((resolve, reject) => {
      const transaction = this.db.transaction(['offlineData'], 'readwrite');
      const store = transaction.objectStore('offlineData');
      const index = store.index('timestamp');
      
      const cutoff = Date.now() - maxAge;
      const request = index.openCursor(IDBKeyRange.upperBound(cutoff));
      
      request.onsuccess = (event) => {
        const cursor = event.target.result;
        if (cursor) {
          store.delete(cursor.primaryKey);
          cursor.continue();
        }
      };
      
      request.onerror = () => reject(request.error);
      transaction.oncomplete = () => resolve();
    });
  }
}

// 在Service Worker中使用
const offlineDataManager = new OfflineDataManager();

// 存储离线请求
self.addEventListener('fetch', event => {
  if (event.request.method === 'POST') {
    event.respondWith(
      fetch(event.request)
        .catch(async () => {
          // 网络失败，存储到离线数据
          const requestData = await event.request.clone().text();
          await offlineDataManager.storeData({
            type: 'post_request',
            url: event.request.url,
            data: requestData,
            timestamp: Date.now()
          });
          
          // 返回离线响应
          return new Response('请求已保存，将在网络恢复后同步', {
            status: 200,
            headers: { 'Content-Type': 'text/plain' }
          });
        })
    );
  }
});

后台同步​

使用Background Sync API在网络恢复时自动同步离线数据：

// 注册后台同步
self.addEventListener('sync', event => {
  if (event.tag === 'background-sync') {
    event.waitUntil(syncOfflineData());
  }
});

// 同步离线数据
async function syncOfflineData() {
  try {
    const offlineData = await offlineDataManager.getData('post_request');
    
    for (const item of offlineData) {
      try {
        // 重新发送请求
        const response = await fetch(item.url, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: item.data
        });
        
        if (response.ok) {
          // 同步成功，删除离线数据
          await offlineDataManager.deleteData(item.id);
          console.log('离线数据同步成功:', item.url);
        }
      } catch (error) {
        console.error('同步失败:', error);
      }
    }
  } catch (error) {
    console.error('获取离线数据失败:', error);
  }
}

// 在页面中触发后台同步
async function triggerBackgroundSync() {
  if ('serviceWorker' in navigator && 'SyncManager' in window) {
    const registration = await navigator.serviceWorker.ready;
    
    try {
      await registration.sync.register('background-sync');
      console.log('后台同步已注册');
    } catch (error) {
      console.error('后台同步注册失败:', error);
    }
  }
}

性能优化​

缓存预热​

在Service Worker安装阶段预缓存关键资源，确保首次加载性能：

// 预缓存关键资源
const CRITICAL_RESOURCES = [
  '/',
  '/css/critical.css',
  '/js/critical.js',
  '/images/hero.jpg'
];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => {
        // 预缓存关键资源
        return cache.addAll(CRITICAL_RESOURCES);
      })
      .then(() => {
        // 后台缓存非关键资源
        return cacheNonCriticalResources();
      })
  );
});

// 后台缓存非关键资源
async function cacheNonCriticalResources() {
  const cache = await caches.open(CACHE_NAME);
  const nonCriticalResources = [
    '/css/non-critical.css',
    '/js/non-critical.js',
    '/images/gallery/',
    '/fonts/'
  ];
  
  for (const resource of nonCriticalResources) {
    try {
      await cache.add(resource);
    } catch (error) {
      console.warn('缓存资源失败:', resource, error);
    }
  }
}

缓存清理​

定期清理过期或不再需要的缓存，避免占用过多存储空间：

// 智能缓存清理
self.addEventListener('activate', event => {
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.map(cacheName => {
          if (cacheName !== CACHE_NAME) {
            console.log('删除旧缓存:', cacheName);
            return caches.delete(cacheName);
          }
        })
      );
    }).then(() => {
      // 清理过期数据
      return offlineDataManager.clearExpiredData();
    })
  );
});

// 定期清理缓存
setInterval(() => {
  offlineDataManager.clearExpiredData();
}, 60 * 60 * 1000); // 每小时清理一次

缓存版本管理​

使用版本号管理缓存，确保用户能及时获取最新内容：

// 缓存版本管理
const CACHE_VERSION = 'v1.2.0';
const CACHE_NAME = `my-app-cache-${CACHE_VERSION}`;

// 版本检查
self.addEventListener('activate', event => {
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.map(cacheName => {
          // 删除旧版本缓存
          if (cacheName !== CACHE_NAME && cacheName.startsWith('my-app-cache-')) {
            console.log('删除旧版本缓存:', cacheName);
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

完整的Service Worker实现示例​

下面是一个完整的Service Worker实现，包含了各种缓存策略和功能：

// sw.js - 完整的Service Worker实现
const CACHE_VERSION = 'v1.0.0';
const CACHE_NAME = `my-app-cache-${CACHE_VERSION}`;

// 缓存策略配置
const CACHE_STRATEGIES = {
  // 静态资源：缓存优先
  static: {
    pattern: /\.(css|js|png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,
    strategy: 'cache-first'
  },
  // API请求：网络优先
  api: {
    pattern: /^\/api\//,
    strategy: 'network-first'
  },
  // 页面：缓存优先，网络更新
  page: {
    pattern: /\.html$|^\/(?!api)/,
    strategy: 'cache-first-network-update'
  }
};

// 安装事件
self.addEventListener('install', event => {
  console.log('Service Worker安装中...');
  
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => {
        console.log('缓存已打开');
        
        // 预缓存关键资源
        const criticalResources = [
          '/',
          '/offline.html',
          '/css/critical.css',
          '/js/critical.js'
        ];
        
        return cache.addAll(criticalResources);
      })
      .then(() => {
        console.log('关键资源已缓存');
        return self.skipWaiting();
      })
      .catch(error => {
        console.error('安装失败:', error);
      })
  );
});

// 激活事件
self.addEventListener('activate', event => {
  console.log('Service Worker激活中...');
  
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.map(cacheName => {
          if (cacheName !== CACHE_NAME && cacheName.startsWith('my-app-cache-')) {
            console.log('删除旧缓存:', cacheName);
            return caches.delete(cacheName);
          }
        })
      );
    }).then(() => {
      console.log('旧缓存已清理');
      return self.clients.claim();
    })
  );
});

// 获取事件
self.addEventListener('fetch', event => {
  const { request } = event;
  const url = new URL(request.url);
  
  // 跳过非GET请求
  if (request.method !== 'GET') {
    return;
  }
  
  // 跳过非HTTP(S)请求
  if (!url.protocol.startsWith('http')) {
    return;
  }
  
  // 根据请求类型选择缓存策略
  const strategy = getCacheStrategy(request);
  
  switch (strategy) {
    case 'cache-first':
      event.respondWith(cacheFirst(request));
      break;
    case 'network-first':
      event.respondWith(networkFirst(request));
      break;
    case 'cache-first-network-update':
      event.respondWith(cacheFirstNetworkUpdate(request));
      break;
    default:
      event.respondWith(fetch(request));
  }
});

// 获取缓存策略
function getCacheStrategy(request) {
  const url = new URL(request.url);
  
  for (const [type, config] of Object.entries(CACHE_STRATEGIES)) {
    if (config.pattern.test(url.pathname)) {
      return config.strategy;
    }
  }
  
  return 'network-first';
}

// 缓存优先策略
async function cacheFirst(request) {
  try {
    const cachedResponse = await caches.match(request);
    if (cachedResponse) {
      return cachedResponse;
    }
    
    const networkResponse = await fetch(request);
    
    if (networkResponse.ok) {
      const cache = await caches.open(CACHE_NAME);
      cache.put(request, networkResponse.clone());
    }
    
    return networkResponse;
  } catch (error) {
    console.error('缓存优先策略失败:', error);
    
    // 返回离线页面
    if (request.mode === 'navigate') {
      return caches.match('/offline.html');
    }
    
    throw error;
  }
}

// 网络优先策略
async function networkFirst(request) {
  try {
    const networkResponse = await fetch(request);
    
    if (networkResponse.ok) {
      const cache = await caches.open(CACHE_NAME);
      cache.put(request, networkResponse.clone());
    }
    
    return networkResponse;
  } catch (error) {
    console.error('网络优先策略失败:', error);
    
    const cachedResponse = await caches.match(request);
    if (cachedResponse) {
      return cachedResponse;
    }
    
    throw error;
  }
}

// 缓存优先，网络更新策略
async function cacheFirstNetworkUpdate(request) {
  try {
    const cachedResponse = await caches.match(request);
    
    // 后台更新缓存
    const updatePromise = fetch(request)
      .then(async networkResponse => {
        if (networkResponse.ok) {
          const cache = await caches.open(CACHE_NAME);
          cache.put(request, networkResponse.clone());
        }
      })
      .catch(error => {
        console.error('后台更新失败:', error);
      });
    
    // 不等待更新完成
    event.waitUntil(updatePromise);
    
    if (cachedResponse) {
      return cachedResponse;
    }
    
    // 缓存未命中，等待网络响应
    const networkResponse = await fetch(request);
    
    if (networkResponse.ok) {
      const cache = await caches.open(CACHE_NAME);
      cache.put(request, networkResponse.clone());
    }
    
    return networkResponse;
  } catch (error) {
    console.error('缓存优先网络更新策略失败:', error);
    
    // 返回离线页面
    if (request.mode === 'navigate') {
      return caches.match('/offline.html');
    }
    
    throw error;
  }
}

// 推送通知处理
self.addEventListener('push', event => {
  const options = {
    body: event.data ? event.data.text() : '您有新的通知',
    icon: '/images/icon-192x192.png',
    badge: '/images/badge-72x72.png',
    vibrate: [100, 50, 100],
    data: {
      dateOfArrival: Date.now(),
      primaryKey: 1
    }
  };
  
  event.waitUntil(
    self.registration.showNotification('通知标题', options)
  );
});

页面集成​

在页面中集成和管理Service Worker：

// ServiceWorkerManager.js - 页面端Service Worker管理
class ServiceWorkerManager {
  constructor() {
    this.registration = null;
    this.isSupported = 'serviceWorker' in navigator;
  }
  
  // 注册Service Worker
  async register(swUrl) {
    if (!this.isSupported) {
      console.warn('浏览器不支持Service Worker');
      return false;
    }
    
    try {
      this.registration = await navigator.serviceWorker.register(swUrl);
      console.log('Service Worker注册成功');
      
      // 监听更新事件
      this.setupUpdateListeners();
      
      return true;
    } catch (error) {
      console.error('Service Worker注册失败:', error);
      return false;
    }
  }
  
  // 设置更新监听
  setupUpdateListeners() {
    // 监听更新可用事件
    this.registration.addEventListener('updatefound', () => {
      console.log('发现新的Service Worker版本');
      const installingWorker = this.registration.installing;
      
      installingWorker.addEventListener('statechange', () => {
        if (installingWorker.state === 'installed') {
          if (navigator.serviceWorker.controller) {
            // 新的Service Worker已安装，但等待旧版本停止使用
            console.log('新的Service Worker已安装，等待激活');
            this.notifyUserOfUpdate();
          } else {
            // 首次安装完成
            console.log('Service Worker首次安装完成');
          }
        }
      });
    });
    
    // 监听控制器变化
    navigator.serviceWorker.addEventListener('controllerchange', () => {
      console.log('Service Worker控制器已变化');
      // 可以选择刷新页面以使用新版本
      window.location.reload();
    });
  }
  
  // 通知用户有更新
  notifyUserOfUpdate() {
    // 这里可以实现更新通知UI
    if (confirm('应用有更新，是否立即刷新？')) {
      window.location.reload();
    }
  }
  
  // 检查更新
  async checkForUpdate() {
    if (!this.registration) {
      console.warn('Service Worker尚未注册');
      return false;
    }
    
    try {
      const updateResult = await this.registration.update();
      console.log('检查更新结果:', updateResult);
      return !!updateResult;
    } catch (error) {
      console.error('检查更新失败:', error);
      return false;
    }
  }
  
  // 注销Service Worker
  async unregister() {
    if (!this.isSupported) {
      return false;
    }
    
    try {
      const registrations = await navigator.serviceWorker.getRegistrations();
      
      for (const registration of registrations) {
        await registration.unregister();
        console.log('Service Worker已注销');
      }
      
      this.registration = null;
      return true;
    } catch (error) {
      console.error('注销Service Worker失败:', error);
      return false;
    }
  }
  
  // 获取缓存状态
  async getCacheStatus() {
    if (!this.isSupported) {
      return null;
    }
    
    try {
      const cacheNames = await caches.keys();
      const cacheStatus = {};
      
      for (const cacheName of cacheNames) {
        const cache = await caches.open(cacheName);
        const keys = await cache.keys();
        cacheStatus[cacheName] = keys.length;
      }
      
      return cacheStatus;
    } catch (error) {
      console.error('获取缓存状态失败:', error);
      return null;
    }
  }
  
  // 清空缓存
  async clearCache() {
    if (!this.isSupported) {
      return false;
    }
    
    try {
      const cacheNames = await caches.keys();
      
      for (const cacheName of cacheNames) {
        await caches.delete(cacheName);
        console.log('缓存已清空:', cacheName);
      }
      
      return true;
    } catch (error) {
      console.error('清空缓存失败:', error);
      return false;
    }
  }
}

// 使用示例
const swManager = new ServiceWorkerManager();

// 页面加载完成后注册Service Worker
window.addEventListener('load', async () => {
  await swManager.register('/sw.js');
});

Service Worker缓存与其他缓存机制的结合​

在实际应用中，Service Worker缓存通常与其他缓存机制结合使用：

  • 与HTTP强缓存和协商缓存结合，形成多层次的缓存策略
  • 与IndexedDB结合，存储更复杂的结构化数据
  • 与LocalStorage/SessionStorage结合，存储用户配置和状态信息
  • 与Push API结合，实现消息推送功能

Service Worker缓存的最佳实践​

使用Service Worker缓存时，应遵循以下最佳实践：

开发阶段​

  • 使用Chrome DevTools调试Service Worker
  • 启用"Update on reload"选项自动更新Service Worker
  • 测试离线和弱网络场景
  • 使用版本化的缓存名称

性能优化​

  • 预缓存关键资源，确保首次加载性能
  • 根据资源类型选择合适的缓存策略
  • 实现智能的缓存清理机制
  • 限制缓存大小，避免过度缓存

用户体验​

  • 提供清晰的离线状态提示
  • 设计友好的离线页面
  • 通知用户应用更新情况
  • 确保离线功能的完整性和可用性

维护管理​

  • 监控缓存命中率和性能指标
  • 定期更新Service Worker和缓存策略
  • 实现优雅的降级方案
  • 考虑不同浏览器的兼容性

Service Worker缓存的限制与注意事项​

使用Service Worker缓存时，需要注意以下限制和问题：

  • HTTPS限制：只能在HTTPS环境下使用（localhost除外）
  • 作用域限制：Service Worker只能控制其注册路径及其子路径下的页面
  • 存储限制：不同浏览器对缓存存储有不同的限制
  • 更新机制：需要正确处理Service Worker的更新和激活
  • 缓存失效：需要实现合理的缓存失效策略
  • 兼容性：部分旧浏览器不支持Service Worker
  • 调试复杂性：调试Service Worker比普通JavaScript更复杂

Service Worker缓存的调试方法​

调试Service Worker可以使用浏览器的开发者工具：

  1. 在Chrome中，打开开发者工具，选择"Application"标签
  2. 在左侧菜单中找到"Service Workers"选项
  3. 可以查看已注册的Service Worker、状态和控制台输出
  4. 可以使用"Update"、"Unregister"、"Stop"等按钮管理Service Worker
  5. 在"Cache Storage"中可以查看和管理缓存内容

前端面试中的Service Worker缓存常见问题​

1. Service Worker的生命周期包括哪些阶段？每个阶段的主要任务是什么？​

参考答案：

Service Worker的生命周期包括以下主要阶段：

  1. 注册（Registration）：

    • 在主线程中调用navigator.serviceWorker.register()注册Service Worker脚本
    • 浏览器下载并解析Service Worker脚本
    • 如果成功，返回一个Promise对象

  2. 安装（Installation）：

    • 触发install事件
    • 通常在这个阶段预缓存关键资源
    • 调用self.skipWaiting()可以跳过等待，直接激活新的Service Worker

  3. 激活（Activation）：

    • 触发activate事件
    • 通常在这个阶段清理旧版本的缓存
    • 调用self.clients.claim()可以让Service Worker立即控制所有打开的页面

  4. 空闲（Idle）：

    • Service Worker处于空闲状态，等待事件触发
    • 可能被浏览器终止以节省资源

  5. 终止（Termination）：

    • Service Worker被浏览器终止
    • 当需要处理新事件时，会被重新启动

2. 什么是PWA？Service Worker在PWA中扮演什么角色？​

参考答案：

PWA（Progressive Web App）是一种结合了Web应用和原生应用优点的Web应用模式，具有可安装、离线访问、推送通知等特性。

Service Worker在PWA中扮演着核心角色：

  1. 离线访问：通过Service Worker缓存实现离线访问能力
  2. 性能优化：拦截和处理网络请求，实现智能缓存策略
  3. 后台同步：使用Background Sync API在网络恢复时同步数据
  4. 推送通知：配合Push API实现推送通知功能
  5. 资源预加载：预加载关键资源，提升用户体验
  6. 后台更新：在后台更新Service Worker和缓存资源

3. Service Worker缓存与传统HTTP缓存有什么区别？​

参考答案：

Service Worker缓存与传统HTTP缓存的主要区别：

  1. 可编程性：Service Worker缓存完全由JavaScript控制，可以实现复杂的缓存策略；传统HTTP缓存由HTTP头字段控制，灵活性有限

  2. 缓存位置：Service Worker缓存在CacheStorage中；传统HTTP缓存在浏览器的HTTP缓存存储区

  3. 缓存内容：Service Worker可以缓存任何网络资源，包括跨域资源；传统HTTP缓存对跨域资源的缓存受CORS策略限制

  4. 离线能力：Service Worker可以在离线状态下完全控制响应；传统HTTP缓存在离线状态下只能使用已缓存的资源

  5. 更新控制：Service Worker可以精确控制缓存的更新和清理；传统HTTP缓存的更新依赖于缓存策略和服务器设置

  6. 适用场景：Service Worker适用于需要精确控制缓存、实现离线功能的场景；传统HTTP缓存适用于简单的资源缓存场景

4. Service Worker的缓存策略有哪些？它们的适用场景分别是什么？​

参考答案：

常见的Service Worker缓存策略包括：

  1. 缓存优先（Cache First）：

    • 优先从缓存中获取资源，如果缓存未命中则从网络获取
    • 适用场景：不经常变化的静态资源，离线应用

  2. 网络优先（Network First）：

    • 优先从网络获取资源，如果网络不可用则使用缓存
    • 适用场景：需要最新数据的动态内容

  3. 只使用缓存（Cache Only）：

    • 只从缓存中获取资源，不发送网络请求
    • 适用场景：离线应用，完全预缓存的资源

  4. 只使用网络（Network Only）：

    • 只从网络获取资源，不使用缓存
    • 适用场景：实时性要求极高的数据，敏感数据

  5. Stale-While-Revalidate：

    • 先返回缓存内容，同时从网络获取更新缓存
    • 适用场景：需要性能和新鲜度平衡的资源

  6. Cache with Network Fallback：

    • 先尝试缓存，缓存未命中时尝试网络，网络也失败时提供离线回退
    • 适用场景：复杂的离线应用场景

5. 如何处理Service Worker的更新和版本控制问题？​

参考答案：

处理Service Worker更新和版本控制的策略：

  1. 版本化缓存名称：

    • 使用版本号或哈希值作为缓存名称的一部分
    • 如my-app-v1、my-app-abc123
    • 当应用更新时，使用新的缓存名称

  2. 在activate事件中清理旧缓存：

    • 在activate事件中，获取所有缓存名称
    • 删除与当前版本不匹配的旧缓存
    • 确保不会累积过多的旧缓存数据

  3. 使用skipWaiting()和clients.claim()：

    • skipWaiting()让新的Service Worker跳过等待，立即激活
    • clients.claim()让Service Worker立即控制所有打开的页面
    • 确保用户能尽快使用新版本

  4. 监控更新状态：

    • 监听updatefound事件，检测Service Worker更新
    • 通过waiting、installing等状态属性跟踪更新进度
    • 可以提示用户刷新页面以应用新版本

  5. 实现回退机制：

    • 为关键功能实现回退策略，避免更新失败导致应用不可用
    • 考虑使用金丝雀发布或渐进式更新策略

Service Worker缓存经典案例分析​

案例1：新闻PWA应用的离线阅读方案​

背景：某新闻应用希望实现离线阅读功能，让用户在无网络环境下也能阅读已浏览过的新闻内容。

解决方案：

  1. 多级缓存策略：

    • 预缓存：在Service Worker安装时预缓存应用核心资源（HTML、CSS、JS）
    • 运行时缓存：用户浏览新闻时，缓存新闻内容、图片等资源
    • IndexedDB存储：存储用户阅读历史和个性化设置

  2. 智能缓存管理：

    • 对不同类型的资源采用不同的缓存策略
      • 核心资源：缓存优先
      • 新闻内容：stale-while-revalidate
      • 图片资源：缓存优先，定期更新
    • 实现LRU缓存淘汰算法，限制缓存大小

  3. 离线体验优化：

    • 设计友好的离线页面和提示
    • 提供离线阅读列表，显示所有可离线阅读的内容
    • 实现背景同步，在网络恢复时自动更新内容

  4. 性能监控：

    • 监控缓存命中率和缓存大小
    • 根据性能数据动态调整缓存策略

效果：

  • 应用在离线环境下的使用率提升了85%
  • 页面加载速度提升了60%
  • 用户留存率提高了40%

案例2：电商PWA的性能优化方案​

背景：某电商应用希望通过Service Worker提升性能，减少页面加载时间，提高转化率。

解决方案：

  1. 资源预加载：

    • 在Service Worker安装阶段预加载关键资源
    • 基于用户浏览行为，预测并预加载可能访问的商品页面资源
    • 使用Link preload和prefetch头配合Service Worker缓存

  2. 智能缓存策略：

    • 静态资源：长缓存时间，使用版本控制
    • 商品列表：stale-while-revalidate策略
    • 商品详情：网络优先，缓存作为回退
    • 用户购物车：实时同步，本地备份

  3. 图片优化：

    • 实现图片资源的自适应加载
    • 根据设备类型和网络条件提供不同质量的图片
    • 优先加载可视区域内的图片

  4. 骨架屏和渐进式加载：

    • 结合Service Worker实现骨架屏快速渲染
    • 实现内容的渐进式加载，提升用户感知性能

效果：

  • 首屏加载时间减少了75%
  • 页面完全加载时间减少了65%
  • 转化率提升了25%
  • 跳出率降低了30%

案例3：企业文档管理系统的离线访问方案​

背景：某企业文档管理系统需要支持员工在网络不稳定或无网络环境下（如出差、会议室）也能访问和编辑文档。

解决方案：

  1. 文档内容缓存：

    • 使用Service Worker缓存用户最近访问的文档内容
    • 对于大型文档，实现分片缓存和按需加载
    • 使用IndexedDB存储文档元数据和用户编辑历史

  2. 离线编辑与同步：

    • 实现完整的离线编辑功能
    • 使用Conflict-free Replicated Data Types (CRDT) 或类似技术解决冲突
    • 通过Background Sync API在网络恢复时自动同步更改

  3. 权限控制与安全：

    • 实现离线状态下的权限验证
    • 对缓存的敏感文档数据进行加密处理
    • 实现远程注销和数据清除功能

  4. 团队协作支持：

    • 提供离线状态下的协作提示
    • 实现离线评论和标记功能
    • 网络恢复后自动合并和同步协作内容

效果：

  • 员工工作效率提升了50%
  • 文档访问速度提升了80%
  • 因网络问题导致的工作中断减少了90%
  • 员工满意度大幅提高

总结​

Service Worker缓存是现代Web应用中的重要技术，它提供了比传统HTTP缓存更强大、更灵活的缓存控制能力。通过Service Worker，开发者可以完全控制网络请求的处理方式，实现离线访问、资源缓存和性能优化等功能。

在实际应用中，我们应该根据应用的需求和资源的特性，选择合适的缓存策略，遵循最佳实践，充分发挥Service Worker缓存的优势，同时注意其限制和安全性问题。

掌握Service Worker缓存的原理和实践，不仅能帮助我们构建高性能的Web应用，也是前端面试中的高频考点。随着Web技术的不断发展，Service Worker缓存将在PWA、离线应用等场景中发挥越来越重要的作用。